<style>
    .layui-form-item .layui-input-inline {
        width: auto;
    }

    #fm {
        border-radius: 0% !important;
    }
</style>
<div class="layui-container fly-marginTop fly-user-main">

    {include file='common/menu'/}


    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title" id="LAY_mine">
                <li class="layui-this" lay-id="info">我的资料</li>
                <li lay-id="avatar">头像</li>
                <li lay-id="pass">密码</li>
                <li lay-id="bind">封面</li>
            </ul>
            <div class="layui-tab-content" style="padding: 20px 0;">
                <!-- 我的资料 -->
                <div class="layui-form layui-form-pane layui-tab-item layui-show">
                    <form method="post">
                        <input type="hidden" name="action" value="profile">
                        <div class="layui-form-item">
                            <label for="L_email" class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" id="L_email" name="email" value="{$LoginUser['email']}" disabled
                                    lay-verify="email" autocomplete="off" value="" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">
                                {if $LoginUser['auth'] != 1}
                                您的邮箱未激活，请点击<a id="auth"
                                    style="font-size: 12px; color: #4f99cf;cursor: pointer;">验证邮箱</a>。
                                {/if}
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_username" class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" id="L_username" name="nickname" value="{$LoginUser['nickname']}"
                                    required lay-verify="required" autocomplete="off" value="" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="radio" name="sex" value="0" title="保密" {$LoginUser['sex']==0
                                        ? 'checked' : '' }>
                                    <input type="radio" name="sex" value="1" title="男" {$LoginUser['sex']==1 ? 'checked'
                                        : '' }>
                                    <input type="radio" name="sex" value="2" title="女" {$LoginUser['sex']==2 ? 'checked'
                                        : '' }>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="province" class="layui-form-label">省</label>
                            <div class="layui-input-inline" style="width: 180px;">
                                <select name="province" id="province" lay-filter="province">
                                    <option value="0">请选择</option>
                                    {foreach($province as $item)}
                                    <option value="{$item['code']}" {$LoginUser['province']==$item['code'] ? 'selected'
                                        : '' }>{$item['name']}</option>
                                    {/foreach}
                                </select>
                            </div>

                            <label for="city" class="layui-form-label">市</label>
                            <div class="layui-input-inline" style="width: 180px;">
                                <select name="city" id="city" lay-filter="city">
                                    <option value="">请选择</option>
                                    {foreach($city as $item)}
                                    <option value="{$item['code']}" {$LoginUser['city']==$item['code'] ? 'selected' : ''
                                        }>{$item['name']}</option>
                                    {/foreach}
                                </select>
                            </div>

                            <label for="district" class="layui-form-label">区</label>
                            <div class="layui-input-inline" style="width: 180px;">
                                <select name="district" id="district">
                                    <option value="0">请选择</option>
                                    {foreach($district as $item)}
                                    <option value="{$item['code']}" {$LoginUser['district']==$item['code'] ? 'selected'
                                        : '' }>{$item['name']}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label for="L_content" class="layui-form-label">签名</label>
                            <div class="layui-input-block">
                                <textarea placeholder="随便写些什么刷下存在感" id="L_content" name="content" autocomplete="off"
                                    class="layui-textarea" style="height: 80px;">{$LoginUser['content']}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" key="set-mine" lay-submit>确认修改</button>
                        </div>
                    </form>
                </div>
                <!-- 修改头像 -->
                <div class="layui-form layui-form-pane layui-tab-item">
                    <div class="layui-form-item">
                        <form method="post" enctype="multipart/form-data">
                            <input type="hidden" name="action" value="avatar">
                            <div class="avatar-add">
                                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                                <button type="button" class="layui-btn upload-img" onclick="avatar.click()">
                                    <i class="layui-icon">&#xe67c;</i>上传头像
                                </button>
                                <input type="file" name="avatar" id="avatar" hidden>
                                <img id="img"
                                    src="{$LoginUser['avatar'] ? $LoginUser['avatar'] : '/static/home/res/images/upload.png'}">
                                <span class="loading"></span>
                            </div>
                            <button class="layui-btn" style="margin-left: 17%;margin-top: 20px;">上传</button>
                        </form>
                    </div>
                </div>
                <!-- 修改密码 -->
                <div class="layui-form layui-form-pane layui-tab-item">
                    <form method="post">
                        <input type="hidden" name="action" value="password">
                        <div class="layui-form-item">
                            <label for="L_nowpass" class="layui-form-label">当前密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="L_nowpass" name="nowpass" placeholder="请输入原密码" required
                                    lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_pass" class="layui-form-label">新密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="L_pass" name="pass" placeholder="请输入新密码" required
                                    lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                            <!-- <div class="layui-form-mid layui-word-aux">6到16个字符</div> -->
                        </div>
                        <div class="layui-form-item">
                            <label for="L_repass" class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="L_repass" name="repass" placeholder="请确认密码" required
                                    lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" key="set-mine" lay-submit>确认修改</button>
                        </div>
                    </form>
                </div>
                <!-- 修改封面 -->
                <div class="layui-form layui-form-pane layui-tab-item">
                    <div class="layui-form-item">
                        <form method="post" enctype="multipart/form-data">
                            <input type="hidden" name="action" value="cover">
                            <div class="avatar-add">
                                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                                <button type="button" class="layui-btn upload-img" onclick="cover.click()">
                                    <i class="layui-icon">&#xe67c;</i>上传封面
                                </button>
                                <input type="file" name="cover" id="cover" hidden>
                                <img id="fm"
                                    src="{$LoginUser['cover'] ? $LoginUser['cover'] : '/static/home/res/images/upload.png'}">
                                <span class="loading"></span>
                            </div>
                            <button class="layui-btn" style="margin-left: 17%;margin-top: 20px;">上传</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script>
    // 引入layui的组件
    layui.use(['layer', 'form'], function () {

        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form

        // 选择省份 form.on => layui事件 select => change
        form.on('select(province)', function (data) {
            var code = data.value
            $.ajax({
                type: "post",
                url: `{:url('/home/user/area')}`,
                data: {
                    code
                },
                dataType: "json",
                success: function (res) {
                    if (res.code === 1) {
                        var option = ''
                        res.data.forEach(item => {
                            option += `<option value="${item.code}">${item.name}</option>`
                        })
                        $('#city').html(option)
                        // 调用函数查询某个省份第一个城市的所有的区
                        GetRegion(res.data[0].code, '#district')
                        // 渲染 select 选择框
                        form.render('select')
                    }
                }
            });
        })
        // 选择城市
        form.on('select(city)', function (data) {
            var code = data.value
            GetRegion(code, '#district')
        })
        function GetRegion(code, element) {
            $.ajax({
                type: "post",
                url: `{:url('/home/user/area')}`,
                data: {
                    code
                },
                dataType: "json",
                success: function (res) {
                    if (res.code === 1) {
                        var option = ''

                        res.data.forEach(item => {
                            option += `<option value="${item.code}">${item.name}</option>`
                        })

                        $(element).html(option)

                        form.render('select')
                    }


                }
            });
        }
        // 邮箱认证
        $('#auth').click(function () {
            var email = $('#L_email').val();

            $.ajax({
                type: "post",
                url: `{:url('/home/user/email')}`,
                data: {
                    email
                },
                dataType: "json",
                success: function (res) {
                    if (res.code === 1) {
                        layer.msg(res.msg)
                    } else {
                        layer.msg(res.msg)
                    }
                }
            });
        })
        // 上传头像
        $('#avatar').change(function () {
            var file = $(this)[0].files[0] ? $(this)[0].files[0] : {}
            var url = GetObjectURL(file)
            $('#img').attr('src', url)
        });
        // 上传封面
        $('#cover').change(function () {
            var file = $(this)[0].files[0] ? $(this)[0].files[0] : {}
            var url = GetObjectURL(file)
            $('#fm').attr('src', url)
        });
        // 图片预览函数
        function GetObjectURL(file) {
            // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
            var url = null;

            //判断是否为IE浏览器还是google还是其他浏览器
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file)
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file)
            }

            return url
        }
    })
</script>